<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width">
        <meta name="restype" content="api">
        <meta name="product" content="kendo-ui">
        <meta name="subproduct" content="view_mobile">
        <title>Configuration, methods and events of Kendo UI Mobile View</title>
        <link rel="shortcut icon" href="/favicon.ico"/>
        <meta name="description" content="How to configure Kendo UI mobile view widget and use events to create highly interactive mobile applications.">
        <link href="//fonts.googleapis.com/css?family=Roboto:400,500,700,900" rel="stylesheet">
        <link href='https://fonts.googleapis.com/css?family=Roboto+Mono:400,500,700' rel='stylesheet' type='text/css'>
        <!-- <link href="https://kendo.cdn.telerik.com/2017.3.1026/styles/kendo.common.min.css" rel="stylesheet" /> -->
        <link rel="stylesheet" href="http://oygy5legq.bkt.clouddn.com/kendo.common.min.css">
        <link rel="stylesheet" href="/assets/styles.css?cb=8338967476da1c756a6defe19c1f9984">
        <link rel="stylesheet" href="/assets/icon-font.css?cb=25d8b9593057297c278fcd6d7d263c8e">
        <link rel="stylesheet" href="/assets/theme.css?cb=d82da02940126146560da1ae3bb0bf64">
        
        <!-- <script src="https://code.jquery.com/jquery-1.10.2.js"></script> -->
        <script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js"></script>
        <!-- <script src="https://kendo.cdn.telerik.com/2017.3.1026/js/kendo.web.min.js"></script> -->
        <script src="http://oygy5legq.bkt.clouddn.com/kendo.web.min.js"></script>
        <!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/codemirror.min.css">
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/codemirror.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/mode/javascript/javascript.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/mode/css/css.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/mode/xml/xml.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.6.0/mode/htmlmixed/htmlmixed.min.js"></script> -->
        <script src="/assets/prettify.js?cb=9671553084e1962263b152af1f563c3c"></script>
        <script src="/assets/app.js?cb=c577f29da14c3752a8c4ba001dde39e5"></script>
        
        <script src="/assets/dojo.js?cb=545f7f252dd3279c5a236b777c1668f1"></script>
        
        

        <!--[if lt IE 9]>
        <script>
        document.createElement('header');
        document.createElement('nav');
        document.createElement('section');
        document.createElement('article');
        document.createElement('aside');
        document.createElement('footer');
        document.createElement('hgroup');
        </script>
        <![endif]-->
    </head>
    <body>
        <!-- Google Tag Manager -->
        <!-- <noscript>
            <iframe src="//www.googletagmanager.com/ns.html?id=GTM-6X92" height="0" width="0" style="display: none; visibility: hidden"></iframe>
        </noscript>
        <script>(function(w, d, s, l, i) { w[l] = w[l] || []; w[l].push({ 'gtm.start': new Date().getTime(), event: 'gtm.js' }); var f = d.getElementsByTagName(s)[0], j = d.createElement(s), dl = l != 'dataLayer' ? '&l=' + l : ''; j.async = true; j.src = '//www.googletagmanager.com/gtm.js?id=' + i + dl; f.parentNode.insertBefore(j, f); })(window, document, 'script', 'dataLayer', 'GTM-6X92');</script> -->
        <!-- End Google Tag Manager -->
        <aside class="TK-Hat">
    <figure class="TK-Hat-Brand">
        <a href="https://www.progress.com" class="TK-PRGS-Logo">
            <svg xmlns="http://www.w3.org/2000/svg" width="94" height="40" viewBox="0 0 512 120">
                <path fill="#5ce500" d="M95.52 29.33v51a3.93 3.93 0 0 1-1.78 3.08l-1.67 1-12.72 7.35-8.59 5-1.78 1V42.6L21.23 15 43.91 1.93 46 .74a3.94 3.94 0 0 1 3.56 0L81 18.9l14.51 8.38v2.05zM58.36 48.72l-9.79-5.66-22.91-13.23a4 4 0 0 0-3.56 0L1.77 41.57 0 42.6l34.49 19.91v39.83l20.3-11.73 1.79-1a3.94 3.94 0 0 0 1.78-3.08V48.72zM0 82.43l23.86 13.78V68.63z"></path>
                <path fill="#4b4e52" d="M148.09 27.28h-26v70.48h11.55V70.1h14.57c15.77 0 24.45-7.7 24.45-21.69 0-6.35-2.4-21.12-24.55-21.12m12.78 21.31c0 7.95-4.12 11.19-14.24 11.19h-13v-22.1h14.57c8.56 0 12.71 3.57 12.71 10.91M207 46.41l.87.42-2 10.42-1.35-.42a11.32 11.32 0 0 0-3.34-.51c-10.79 0-11.67 8.59-11.67 19v22.44h-10.64V46h10v6.24c2.73-4.2 6-6.37 10.37-6.9a14.55 14.55 0 0 1 7.76 1.07M233.29 45c-8.42 0-15.16 3.2-19.5 9.27-4.56 6.37-5.23 13.85-5.23 17.74 0 16.36 9.7 26.92 24.73 26.92 18.26 0 24.73-14.71 24.73-27.3 0-7.25-2.15-13.82-6-18.51-4.41-5.31-10.87-8.12-18.7-8.12m0 44.38c-8.37 0-13.57-6.66-13.57-17.37s5.2-17.55 13.57-17.55S247 61.23 247 71.78c0 10.83-5.24 17.56-13.66 17.56m114.55-42.93l.87.42-2 10.42-1.35-.42a11.26 11.26 0 0 0-3.33-.51c-10.78 0-11.66 8.59-11.66 19v22.44h-10.66V46h10v6.24c2.73-4.2 6-6.37 10.37-6.9a14.54 14.54 0 0 1 7.73 1.06m38.4 34.76l-.2.57c-2.23 6.36-7.57 7.7-11.65 7.7-8.09 0-13.3-5.37-13.81-14.09h36.59l.13-1a31.26 31.26 0 0 0 .12-4.12v-.93C396.93 54.78 387.48 45 374 45c-7.9 0-14.37 3.1-18.73 9a30.85 30.85 0 0 0-5.54 18c0 16 9.95 26.74 24.74 26.74 11.45 0 19.33-5.82 22.2-16.38l.33-1.2h-10.7zM361 66.05c.9-7.17 5.81-11.73 12.79-11.73 5.33 0 11.64 3.1 12.52 11.73H361zm-60.7-15.71c-3.45-3.58-8.06-5.39-13.76-5.39-15.69 0-22.83 13.81-22.83 26.63 0 13.16 7.06 26.44 22.83 26.44a18.33 18.33 0 0 0 13.35-5.42c0 2.28-.1 4.45-.16 5.38-.58 8.54-4.68 12.51-12.91 12.51-4.47 0-9.61-1.59-10.6-6l-.22-1h-10.54l.17 1.41c1.1 9.12 9.11 14.79 20.9 14.79 10.34 0 17.7-3.9 21.28-11.26 1.73-3.55 2.6-8.72 2.6-15.37V46h-10.13v4.34zm-13.11 38.15c-3.74 0-12.43-1.69-12.43-17.37 0-10.3 4.87-16.7 12.71-16.7 6.06 0 12.52 4.39 12.52 16.7 0 10.87-4.79 17.37-12.81 17.37m159.67-6.31c0 8.23-6.83 16.53-22.09 16.53-13.5 0-21.53-5.85-22.61-16.45l-.15-1.1h10.52l.21.84c1.29 6.38 7.37 7.72 12.24 7.72 5.34 0 11-1.72 11-6.54 0-2.44-1.59-4.18-4.73-5.16-1.86-.55-4.15-1.2-6.56-1.87-4.16-1.16-8.47-2.38-11.12-3.29-6.56-2.35-10.33-6.93-10.33-12.56 0-10.43 10.16-15.11 20.22-15.11 13.46 0 20.42 5.07 21.3 15.49l.09 1.07H434.5l-.14-.82c-1-6-7-6.9-10.48-6.9-3 0-10 .53-10 5.5 0 2.25 1.93 3.91 5.89 5.06 1.18.33 2.94.78 5 1.31 4.22 1.09 9.48 2.46 12.13 3.37 6.59 2.32 9.93 6.67 9.93 13m49.39 0c0 8.23-6.83 16.53-22.09 16.53-13.5 0-21.53-5.85-22.61-16.45l-.11-1.09H462l.12.74c1.29 6.38 7.37 7.72 12.24 7.72 5.34 0 11-1.72 11-6.54 0-2.44-1.59-4.18-4.72-5.16-1.86-.55-4.15-1.2-6.57-1.87-4.16-1.16-8.46-2.38-11.11-3.29-6.57-2.35-10.33-6.93-10.33-12.56 0-10.43 10.16-15.11 20.22-15.11 13.46 0 20.42 5.07 21.29 15.49l.09 1.07H483.9l-.14-.82c-1-6-7-6.9-10.48-6.9-3 0-9.95.53-9.95 5.5 0 2.25 1.93 3.91 5.89 5.06 1.18.33 2.94.78 5 1.31 4.22 1.09 9.48 2.46 12.13 3.37 6.58 2.32 9.93 6.67 9.93 13m8.43-30.78a7.37 7.37 0 1 1 7.29-7.37 7.23 7.23 0 0 1-7.29 7.37m0-13.49a6.12 6.12 0 1 0 6 6.12 5.91 5.91 0 0 0-6-6.12m-.85 7.49v2.46h-2.17v-7.74h3.62a2.58 2.58 0 0 1 2.86 2.7 2.26 2.26 0 0 1-1.49 2.34l1.77 2.7H506l-1.49-2.46h-.68zm1.21-3.49h-1.21v1.73h1.21a.86.86 0 0 0 1-.85.88.88 0 0 0-1-.89"></path>
            </svg>
        </a>
    </figure>
</aside>
<header id="page-header">
    <div class="toggle-nav"><span class="k-icon k-i-menu"></span></div>


    <div id="logo-bar">
        <a href="/introduction">
            <img alt="Kendo UI logo" class="logo" src="/images/kendo-ui.svg">
        </a>
    </div>

    
    <span class="show-search">
        <span class="k-icon k-i-search"></span>
    </span>
    
    <div class="nav-buttons">
        <a href="http://demos.telerik.com/kendo-ui/" class="btn demos-btn">Demos</a>
        <a href="http://www.telerik.com/kendo-ui" class="btn about-btn">About</a>
        <a href="http://www.telerik.com/purchase/kendo-ui" class="btn pricing-btn">Pricing</a>
        <a href="http://www.telerik.com/download/kendo-ui" class="btn btn-primary">Try now</a>
    </div>
</header>
        <div id="page-inner-content">
    <div id="page-nav">
        <div id="page-tree"></div>
        <script>
        $("#page-tree").kendoTreeView({
            dataSource: {
                transport: {
                    read: {
                        url: "/default.json",
                        dataType: "json"
                    }
                },
                schema: {
                    model: {
                        id: "path",
                        children: "items",
                        hasChildren: "items"
                    }
                }
            },
            messages: {
                loading: " "
            },
            select: preventParentSelection,
            template: navigationTemplate("/"),
            dataBound: expandNavigation("api/javascript/mobile/ui/view.html")
        });
        </script>
    </div>

    <a id="page-edit-link" href="https://github.com/telerik/kendo-ui-core/edit/master/docs//api/javascript/mobile/ui/view.md"><span class="k-icon k-i-pencil"></span> Edit this page</a>
    <div id="markdown-toc"></div>

    <div id="page-article">
        <article>
            
             <h1 id="kendomobileuiview"><a href="#kendomobileuiview">kendo.mobile.ui.View</a></h1>

<h2 id="configuration"><a href="#configuration">Configuration</a></h2>

<h3 id="configuration-model">
<a href="#configuration-model">model </a><code>String  |</code><code> ObservableObject</code><em>(default: null)</em>
</h3>

<p>The MVVM model to bind to. If a string is passed, The view will try to resolve a reference to the view model variable in the global scope.</p>

<h4>Example</h4>

<pre><code>&lt;div data-role="view" data-model="foo"&gt;
   &lt;span data-bind="text:bar"&gt;&lt;/span&gt;
&lt;/div&gt;

&lt;script&gt;
var foo = { bar: "baz" }
new kendo.mobile.Application();
&lt;/script&gt;
</code></pre>

<h3 id="configuration-reload">
<a href="#configuration-reload">reload </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" class="type-link"><code>Boolean</code></a> <em>(default: false)</em>
</h3>

<p>Applicable to remote views only. If set to true, the remote view contents will be reloaded from the server (using Ajax) each time the view is navigated to.</p>

<h4>Example</h4>

<pre><code>&lt;!-- foo.html --&gt;
&lt;div data-role="view"&gt;
    &lt;a data-role="button" href="bar.html"&gt;Go to bar&lt;/a&gt;
&lt;/div&gt;

&lt;!-- bar.html --&gt;
&lt;div data-role="view" data-reload="true"&gt;
  I will be requested from the server every time I am displayed
  &lt;a href="#" id="link"&gt;Link&lt;/a&gt;
&lt;/div&gt;
</code></pre>

<h3 id="configuration-scroller">
<a href="#configuration-scroller">scroller </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a> <em>(default: null)</em>
</h3>

<p>Configuration options to be passed to the scroller instance instantiated by the view. For more details, check the scroller <a href="/api/mobile/scroller#configuration">configuration options</a>.</p>

<h4>A view with elastic scrolling set to false</h4>

<pre><code>&lt;!-- foo.html --&gt;
&lt;div data-role="view" data-scroller='{"elastic": false}'&gt;
    This view will not bounce when scrolled
&lt;/div&gt;
</code></pre>

<h3 id="configuration-stretch">
<a href="#configuration-stretch">stretch </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" class="type-link"><code>Boolean</code></a><em>(default: false)</em>
</h3>

<p>If set to true, the view will stretch its child contents to occupy the entire view, while disabling kinetic scrolling.
Useful if the view contains an image or a map.</p>

<h4>Example</h4>

<pre><code>&lt;div data-role="view" data-stretch="true"&gt;
  &lt;div style="background: gray"&gt;This element will be stretched&lt;/div&gt;
&lt;/div&gt;

&lt;script&gt;
new kendo.mobile.Application();
&lt;/script&gt;
</code></pre>

<h3 id="configuration-title">
<a href="#configuration-title">title </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h3>

<p>The text to display in the NavBar title (if present) and the browser title.</p>

<h4>Example</h4>

<pre><code>&lt;div data-role="view" data-title="foo"&gt;
  &lt;div data-role="header"&gt;
    &lt;div data-role="navbar"&gt;
      &lt;span data-role="view-title"&gt;&lt;/span&gt;
    &lt;/div&gt;
  &lt;/div&gt;
 &lt;/div&gt;

&lt;script&gt;
new kendo.mobile.Application();
&lt;/script&gt;
</code></pre>

<h3 id="configuration-useNativeScrolling">
<a href="#configuration-useNativeScrolling">useNativeScrolling </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" class="type-link"><code>Boolean</code></a><em>(default: false)</em>
</h3>

<p>If set to true, the view will use the native scrolling available in the current platform. This should help with form issues on some platforms (namely Android and WP8).
Native scrolling is only enabled on platforms that support it: iOS &gt; 5+, Android &gt; 3+, WP8. BlackBerry devices do support it, but the native scroller is flaky.</p>

<h4>Example</h4>

<pre><code>&lt;div data-role="view" data-use-native-scrolling="true"&gt;
  &lt;div style="height: 2000px;"&gt;Tall element - this view has native scrolling&lt;/div&gt;
&lt;/div&gt;

&lt;script&gt;
new kendo.mobile.Application();
&lt;/script&gt;
</code></pre>

<h3 id="configuration-zoom">
<a href="#configuration-zoom">zoom </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" class="type-link"><code>Boolean</code></a><em>(default: false)</em>
</h3>

<p>If set to true, the user can zoom in/out the contents of the view using the pinch/zoom gesture.</p>

<h4>Example</h4>

<pre><code>&lt;div data-role="view" data-zoom="true"&gt;
  &lt;div style="height: 2000px;width:200px;"&gt;Big element - the view can be zoomed with two fingers&lt;/div&gt;
&lt;/div&gt;

&lt;script&gt;
new kendo.mobile.Application();
&lt;/script&gt;
</code></pre>

<h2 id="methods"><a href="#methods">Methods</a></h2>

<h3 id="methods-contentElement"><a href="#methods-contentElement">contentElement</a></h3>

<p>Retrieves the current content holder of the View - this is the content element if the View is stretched or the scroll container otherwise.</p>

<blockquote>
<p><strong>Important:</strong> Use this method to get a reference container in order to remove or append contents to the View</p>
</blockquote>

<h4>Example</h4>

<pre><code>&lt;div data-role="view" id="myView"&gt;
    &lt;a data-role="button" data-click="getContentElement"&gt;Tap here&lt;/a&gt;
&lt;/div&gt;

&lt;script&gt;
function getContentElement() {
    var view = $("#myView").data("kendoMobileView");
    console.log(view.contentElement());
}

new kendo.mobile.Application();
&lt;/script&gt;
</code></pre>

<h3 id="methods-destroy"><a href="#methods-destroy">destroy</a></h3>

<p>Prepares the <strong>View</strong> for safe removal from DOM. Detaches all event handlers and removes jQuery.data attributes to avoid memory leaks. Calls destroy method of any child Kendo widgets.</p>

<blockquote>
<p><strong>Important:</strong> This method does not remove the View element from DOM.</p>
</blockquote>

<h4>Example</h4>

<pre><code>&lt;div data-role="view" id="main"&gt;
    &lt;a data-role="button" data-click="destroyView"&gt;Destroy and remove view&lt;/a&gt;
&lt;/div&gt;

&lt;script&gt;
function destroyView() {
  $("#main").data("kendoMobileView").destroy();
  $("#main").remove();
}
new kendo.mobile.Application();
&lt;/script&gt;
</code></pre>

<h3 id="methods-enable"><a href="#methods-enable">enable</a></h3>

<p>Enables or disables the user interaction with the view and its contents.</p>

<h4>Parameters</h4>

<h5>enable <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Boolean" class="type-link"><code>Boolean</code></a>
</h5>

<p>Omitting the parameter or passing <code>true</code> enables the view. Passing <code>false</code> disables the view.</p>

<h4>Example - disable a view</h4>

<pre><code>&lt;div data-role="view" id="myView"&gt;
    &lt;a data-role="button" data-click="disableView"&gt;Tap here&lt;/a&gt;
&lt;/div&gt;

&lt;script&gt;
function disableView() {
    $("#myView").data("kendoMobileView").enable(false);
}

new kendo.mobile.Application();
&lt;/script&gt;
</code></pre>

<h2 id="events"><a href="#events">Events</a></h2>

<h3 id="events-afterShow"><a href="#events-afterShow">afterShow</a></h3>

<p>Fires after the mobile View becomes visible. If the view is displayed with transition, the event is triggered after the transition is complete.</p>

<h4>Example</h4>

<pre><code>&lt;div data-role="view" id="foo"&gt;
    &lt;a href="#bar" data-role="button"&gt;Go to bar&lt;/a&gt;
&lt;/div&gt;

&lt;div data-role="view" id="bar" data-after-show="afterShow"&gt;
    Bar
&lt;/div&gt;

&lt;script&gt;
var app = new kendo.mobile.Application();

function afterShow(e) {
    console.log(e.view);
}
&lt;/script&gt;
</code></pre>

<h4>Event Data</h4>

<h5>e.view <code>kendo.mobile.ui.View</code>
</h5>

<p>The mobile view instance</p>

<h3 id="events-beforeHide"><a href="#events-beforeHide">beforeHide</a></h3>

<p>Fires before the mobile View becomes hidden.</p>

<h4>Example</h4>

<pre><code>&lt;div data-role="view" id="foo" data-before-hide="beforeHide"&gt;
    &lt;a href="#bar" data-role="button"&gt;Bar&lt;/a&gt;
&lt;/div&gt;

&lt;div id="bar" data-role="view"&gt;
    The bar view
&lt;/div&gt;

&lt;script&gt;
var app = new kendo.mobile.Application();
function beforeHide(e) {
    console.log('foo hidden');
}
&lt;/script&gt;
</code></pre>

<h4>Event Data</h4>

<h5>e.view <code>kendo.mobile.ui.View</code>
</h5>

<p>The mobile view instance</p>

<h3 id="events-beforeShow"><a href="#events-beforeShow">beforeShow</a></h3>

<p>Fires before the mobile View becomes visible. The event can be prevented by calling the <code>preventDefault</code> method of the event parameter, in case a redirection should happen.</p>

<h4>Example</h4>

<pre><code>&lt;div data-role="view" id="foo"&gt;
    &lt;a href="#protected" data-role="button"&gt;Go to protected&lt;/a&gt;
&lt;/div&gt;

&lt;div data-role="view" id="protected" data-before-show="redirectBack"&gt;
    I am a protected view
&lt;/div&gt;

&lt;script&gt;
var app = new kendo.mobile.Application();

function redirectBack(e) {
    e.preventDefault();
    app.navigate("#foo");
}
&lt;/script&gt;
</code></pre>

<h4>Event Data</h4>

<h5>e.view <code>kendo.mobile.ui.View</code>
</h5>

<p>The mobile view instance</p>

<h3 id="events-hide"><a href="#events-hide">hide</a></h3>

<p>Fires when the mobile View becomes hidden.</p>

<h4>Example</h4>

<pre><code>&lt;div data-role="view" id="foo" data-hide="onHide"&gt;
    &lt;a href="#bar" data-role="button"&gt;Bar&lt;/a&gt;
&lt;/div&gt;

&lt;div id="bar" data-role="view"&gt;
    The bar view
&lt;/div&gt;

&lt;script&gt;
var app = new kendo.mobile.Application();
function onHide(e) {
    console.log('foo hidden');
}
&lt;/script&gt;
</code></pre>

<h4>Event Data</h4>

<h5>e.view <code>kendo.mobile.ui.View</code>
</h5>

<p>The mobile view instance</p>

<h3 id="events-init"><a href="#events-init">init</a></h3>

<p>Fires after the mobile View and its child widgets are initialized.</p>

<h4>Example</h4>

<pre><code>&lt;div data-role="view" id="foo" data-init="init"&gt;
    Foo
&lt;/div&gt;

&lt;script&gt;
var app = new kendo.mobile.Application();

function init(e) {
    console.log('init');
}
&lt;/script&gt;
</code></pre>

<h4>Event Data</h4>

<h5>e.view <code>kendo.mobile.ui.View</code>
</h5>

<p>The mobile view instance</p>

<h3 id="events-show"><a href="#events-show">show</a></h3>

<p>Fires when the mobile View becomes visible.</p>

<h4>Example</h4>

<pre><code>&lt;div data-role="view" id="foo" data-show="show"&gt;
    Foo
&lt;/div&gt;

&lt;script&gt;
var app = new kendo.mobile.Application();
function show(e) {
    console.log('show');
}
&lt;/script&gt;
</code></pre>

<h4>Event Data</h4>

<h5>e.view <code>kendo.mobile.ui.View</code>
</h5>

<p>The mobile view instance.</p>

<h3 id="events-transitionStart"><a href="#events-transitionStart">transitionStart</a></h3>

<p>Fires when the mobile view transition starts.</p>

<h4>Event Data</h4>

<h5>e.type <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h5>

<p>The transition type. Can be either <code>"show"</code> or <code>"hide"</code></p>

<h3 id="events-transitionEnd"><a href="#events-transitionEnd">transitionEnd</a></h3>

<p>Fires after the mobile view transition container has its <code>k-fx-end</code> class set. Setting CSS properties to the view at the event handler will animate them.</p>

<h4>Event Data</h4>

<h5>e.type <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String" class="type-link"><code>String</code></a>
</h5>

<p>The transition type. Can be either <code>"show"</code> or <code>"hide"</code></p>

<h2 id="fields"><a href="#fields">Fields</a></h2>

<h3 id="fields-header">
<a href="#fields-header">header </a><a href="http://api.jquery.com/Types/#jQuery" class="type-link"><code>jQuery</code></a>
</h3>

<p>The <strong>View</strong> (or the applied mobile layout) header DOM element.</p>

<h3 id="fields-footer">
<a href="#fields-footer">footer </a><a href="http://api.jquery.com/Types/#jQuery" class="type-link"><code>jQuery</code></a>
</h3>

<p>The <strong>View</strong> (or the applied mobile layout) footer DOM element.</p>

<h3 id="fields-content">
<a href="#fields-content">content </a><a href="http://api.jquery.com/Types/#jQuery" class="type-link"><code>jQuery</code></a>
</h3>

<p>The <strong>View</strong> content DOM element. If there is a scroller in the View, it will become a child of this element. Please use the <code>contentElement</code> method instead, to always get the correct content element.</p>

<h3 id="fields-model">
<a href="#fields-model">model </a><code>kendo.data.ObservableObject</code>
</h3>

<p>The <strong>Model</strong> associated with the view</p>

<h3 id="fields-params">
<a href="#fields-params">params </a><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object" class="type-link"><code>Object</code></a>
</h3>

<p>The currently set query string parameters</p>

<h3 id="fields-scrollerContent">
<a href="#fields-scrollerContent">scrollerContent </a><a href="http://api.jquery.com/Types/#jQuery" class="type-link"><code>jQuery</code></a>
</h3>

<p>The View mobile scroller container DOM element. Recommended if scrollable mobile View contents need to be manipulated or replaced. If you don't know if the View has a Scroller initialized, please use the <code>contentElement</code> method instead.</p>

<h4>Replace scrollable View contents</h4>

<pre><code>&lt;div data-role="view" data-init="replaceContents"&gt; Old content&lt;/div&gt;

&lt;script&gt;
function replaceContents(e) {
  e.view.scrollerContent.html("&lt;b&gt;New content&lt;/b&gt;");
}

new kendo.mobile.Application();
&lt;/script&gt;
</code></pre> 
        </article>
    </div>
    <div id="feedback-container">
  <div id="feedback-section">
    <script src="/assets/feedback.js?cb=e99a3802c754fe2425831d58312c7c8b"></script>
    <span id="popupNotification"></span>
    <div id="feedback-menu-container">
      <div id="helpful-buttons-container">
        <span class="side-title">Is this article helpful?</span>
        <a class="button" id="yesButton">Yes</a> /
        <a class="button" id="noButton">No</a>
      </div>
      <div id="feedback-submitted-container">
        <span class="side-title">Thank you for your feedback!</span>
      </div>
    </div>
    <div id="feedback-window-container">
      <div id="feedback-form-window" style="background-color: white;">
        <h1 class="feedback-extw__title">Give article feedback</h1>
        <p>Tell us how we can improve this article</p>
        <span id="feedback-form-popup-container"></span>
        <form id="feedback-form">
          <div id="feedback-checkbox-area">
            <input id="hidden-sheet-id" type="hidden" value="14zzclhdh7dMLpg0iq4-2hweCdEiuxxqP3tHdr42-_Cs">
            <label>
              <input type="checkbox" data-bind="checked: outdatedSample" /> Code samples are inaccurate / outdated.
            </label>
            <span class="required-field" data-bind="visible: outdatedSample"></span>
            <textarea id="feedback-code-sample-text-input" placeholder="Please, specify more details ..." class="feedback-extw__textarea"
              data-bind="visible: outdatedSample, value: inaccurateOutdatedCodeSamplesText">
          </textarea>
            <label>
              <input type="checkbox" data-bind="checked: otherMoreInformation" /> I expected to find other / more information.
            </label>
            <span class="required-field" data-bind="visible: otherMoreInformation"></span>
            <textarea id="feedback-more-information-text-input" class="feedback-extw__textarea" placeholder="Please, specify what information can be added ..."
              data-bind="visible: otherMoreInformation, value: otherMoreInformationText">
          </textarea>
            <label>
              <input type="checkbox" data-bind="checked: textErrors" /> There are typos / broken links / broken page elements.
            </label>
            <span class="required-field" data-bind="visible: textErrors"></span>
            <textarea id="feedback-text-errors-text-input" class="feedback-extw__textarea" placeholder="Please, specify what needs to be fixed ..."
              data-bind="visible: textErrors, value: typosLinksElementsText">
          </textarea>
            <label>
              <input type="checkbox" data-bind="checked: inaccurateContent" /> Content is inaccurate / outdated.
            </label>
            <span class="required-field" data-bind="visible: inaccurateContent"></span>
            <textarea id="feedback-inaccurate-content-text-input" class="feedback-extw__textarea" placeholder="Please, specify which conent ..."
              data-bind="visible: inaccurateContent, value: inaccurateOutdatedContentText"></textarea>
            <label>
              <input type="checkbox" data-bind="checked: otherFeedback" /> Other
            </label>
            <span class="required-field" data-bind="visible: otherFeedback"></span>
            <textarea id="feedback-other-text-input" placeholder="Please, enter more details or not listed feedback ..." class="feedback-extw__textarea"
              data-bind="visible: otherFeedback, value: textFeedback">
          </textarea>
            <input id="feedback-email-input" type="email" placeholder="email (optional)" data-email-msg="Email format is not valid."
              class="feedback-extw__input input" data-bind="value: email" />
          </div>
        </form>
        <div class="feedback-extw__foot">
          <button id="form-submit-button" class="feedback-extw__button button button--action">Send feedback</button>
          <button id="form-close-button" class="feedback-extw__button button">Cancel</button>
        </div>
      </div>
    </div>
    <a id="close-button" class="button">
      <img src="/images/close-btn.svg" alt="close" />
    </a>
  </div>
  <div id="feedback-section-dummy">Dummy</div>
</div>
    <footer>
    <p>Copyright &copy; 2017 Progress Software Corporation and/or its subsidiaries or affiliates. All Rights Reserved.</p>
</footer>

</div>
    </body>
</html>

